<template>
  <div class="app-container">
      <el-form :model="form" ref="form" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="部门" prop="deptId">
              <el-select v-model="form.deptId" placeholder="请选择部门" filterable size="small" style="width: 100%;"  @change="selectChangedBindDeptName">
                <el-option v-for="dept in deptList"
                           :key="dept.orgCode"
                           :label="dept.orgName"
                           :value="dept.orgCode"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="部门代号" prop="deptCoding">
              <el-input v-model="form.deptCoding" placeholder="请输入部门代号"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="状态" prop="deptStatus">
              <el-radio-group v-model="form.deptStatus">
                <el-radio
                        v-for="dict in deptStatusOptions"
                        :key="dict.code"
                        :label="dict.code"
                >{{dict.name}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer" align="center" class="dialog-footer" style="float: right;">
        <el-button :loading="buttonLoading" size="mini" type="primary" @click="submitForm">保 存</el-button>
        <el-button :loading="buttonLoading" size="mini" @click="cancel">取 消</el-button>
      </div>
  </div>
</template>

<script>
  import {addDeptCoding, getDeptCodingByDeptCodeId, updateDeptCoding} from "@/api/question/deptCoding"

  export default {
    name: "deptCoding",
    props: {
      // 部门集合
      deptList: Array,
    },
    components: {

    },
    data(){
      return{
        buttonLoading: false,
        form: {
          deptStatus: '0' // 默认启用
        },
        deptStatusOptions: [],
        dept: undefined,
        rules: {
          deptCoding: [
            { required: true, message: "部门代号不能为空", trigger: "blur"}
          ],
          deptId: [
            { required: true, message: "部门不能为空", trigger: "change"}
          ],
          deptStatus: [
            { required: true, message: "状态不能为空", trigger: "change"}
          ]
        }
      }
    },
    created() {
      this.getDicts("dept_coding_status").then(response => {
        this.deptStatusOptions = response.responseBody.result;
      });
    },
    methods: {
      init(deptCodingId) {
        getDeptCodingByDeptCodeId(deptCodingId).then(response => {
          this.form = response.responseBody;
        });
      },
      // 获取选择组织对应组织名称
      selectChangedBindDeptName(deptId){
        // console.log("=========",deptId);
        // console.log("=========",this.deptList);
        const deptList = this.deptList;
        // 获取选择的对应组织名称
        this.recursionDept(deptId,deptList);
      },
      recursionDept(deptId,deptList) {
        deptList.forEach(value => {
          if (value.orgCode === deptId) {
            this.form.deptName = value.orgName;
            return;
          }
        })
      },
      //新增
      submitForm(){
        this.$refs["form"].validate(valid => {
          if(valid){
            this.buttonLoading = true;
            if(this.form.deptCodeId != undefined){
              updateDeptCoding(this.form).then(response => {
                if (response.retCode === '200') {
                  this.msgSuccess(response.message);
                  this.$emit("submitForm");
                  this.$emit("cancelDialog");
                }
              }).finally(() => {
                this.buttonLoading = false;
              });
            }else {
              addDeptCoding(this.form).then(response => {
                if (response.retCode === '200') {
                  this.msgSuccess(response.message);
                  this.$emit("submitForm");
                  this.$emit("cancelDialog");
                }
              }).finally(() => {
                this.buttonLoading = false;
              });
            }
          }
        });
      },
      cancel(){
        this.$emit("cancelDialog");
      },
    }
  }
</script>

<style scoped>

</style>
